"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/10/24
 */
import * as React from 'react'
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";

const {View, TouchableOpacity,} = require('react-native');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
const {connect} = require('react-redux');
import MyText from "../../component/MyText";
import Colors from "../../assets/styles/Colors";
import Line from "../../component/Line";
import {SCREEN_WIDTH} from "../../constant";
import NavBackButton from "../../component/BackButton";
import SearchBar from "../../component/SearchBar";
import {WorkSpacePage} from "../../interface/router";

const {DatePicker} = require('antd-mobile');

class ReserveWorkSpacePage extends React.Component<WorkSpacePage, any> {


    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            currentTab: 0,
            lastTab: 0,
            visible: false,
            dpValue: null,
        }
    }


    changeTab = (currentTab) => {
        if (this.state.currentTab === currentTab) return;
        if (currentTab === 2) {
            this.setState({currentTab, visible: true})
        } else {
            this.setState({lastTab: currentTab, currentTab, visible: false});
        }
    };

    render() {
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               title={<SearchBar placeholder='探索会员圈' rightButtonWidth={0} leftButtonWidth={60}
                                                 editable={false}
                                                 onPress={Actions.search}/>}
                />

                <View style={[commonStyles.flexRow, {backgroundColor: Colors.Primary}]}>
                    {['今天', '明天', '选择日期'].map((text, index) => {
                        return (
                            <TouchableOpacity key={index} style={[commonStyles.flex1, {
                                height: autoSize(49)
                            }]} onPress={this.changeTab.bind(this, index)}>
                                <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                                    <MyText
                                        color={index === this.state.currentTab ? Colors.Active : Colors.SubTitle}>{text}</MyText>
                                </View>
                                {index === this.state.currentTab ?
                                    <Line width={autoSize(SCREEN_WIDTH / 3)} height={4} color={Colors.Active}/> : null}
                            </TouchableOpacity>
                        )
                    })}
                </View>


                <View style={[commonStyles.flex1, commonStyles.centerVH]}>
                    <MyText>暂无空余工作场地可供预定</MyText>
                </View>
                <DatePicker
                    visible={this.state.visible}
                    value={this.state.dpValue}
                    onOk={date => this.setState({dpValue: date, visible: false, currentTab: this.state.lastTab})}
                    onDismiss={() => this.setState({visible: false, currentTab: this.state.lastTab})}
                />
            </View>
        );
    }
}


export default connect(
    ({auth, sys, room}) => ({auth, sys, room})
)(ReserveWorkSpacePage);